<template>
    <div ref="tableWrapperRef" class="ctableWrapper" @mouseover="stopAutoFlip" @mouseleave="startAutoFlip">
      <table class="indexTable">
        <tr v-for="t in tableData" :key="t.iname">
          <th>{{ t.iname }}</th>
          <th>
            <div class="tableRate">
              {{ t.iprice }}
            </div>
          </th>
        </tr>
      </table>
  
      <!-- 分页 样式引入的element-plus里面的分页样式 -->
      <el-pagination
        v-if="false"
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        v-model:current-page="page"
        @current-change="handleCurrentChange"
        :hide-on-single-page="true"
      />
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted, onUnmounted, nextTick } from "vue";
  import axios from "axios";
  
  // 定义变量：分页 total总数 page当前第几页 pageSize每页条数
  const total = ref(0);
  const pageSize = ref(7);
  const page = ref(1); // 将 currentPage 改为 page，因为 Element Plus 使用的是 current-page
  const tableData = ref([]);
  const intervalId = ref<number | null>(null);
  const tableWrapperRef = ref<HTMLDivElement | null>(null);
  const rowHeight = 40; // 固定的行高
  
  // 查询
  const callApi = () => {
    axios
      .get(`http://127.0.0.1:8080/indexes?page=${page.value}&pageSize=${pageSize.value}`)
      .then((res: any) => {
        tableData.value = res.data.data.rows;
        total.value = res.data.data.total;
        console.log(res.data.data.rows);
      })
      .catch((err: any) => {
        console.error(err); // 最好捕获错误并打印出来，方便调试
      });
  };
  
  const calculatePageSize = () => {
    if (tableWrapperRef.value) {
      const wrapperHeight = tableWrapperRef.value.clientHeight;
      pageSize.value = Math.floor(wrapperHeight / rowHeight);
    }
  };
  
  onMounted(() => {
    calculatePageSize();
    callApi();
    startAutoFlip();
    window.addEventListener("resize", handleResize);
  });
  
  onUnmounted(() => {
    stopAutoFlip();
    window.removeEventListener("resize", handleResize);
  });
  
  const handleResize = () => {
    nextTick(() => {
      calculatePageSize();
      callApi();
    });
  };
  
  // 分页下标导航
  const handleCurrentChange = (val: number) => {
    page.value = val; // 更新当前页码
    callApi();
  };
  
  // 启动定时器函数
  const startAutoFlip = () => {
    if (intervalId.value === null) {
      intervalId.value = setInterval(() => {
        const nextPage = page.value + 1;
        if (nextPage > Math.ceil(total.value / pageSize.value)) {
          page.value = 1; // 翻到最后一页时跳回到第一页
        } else {
          page.value = nextPage;
        }
        callApi();
      }, 5000); // 每隔5秒翻一页
    }
  };
  
  // 停止定时器函数
  const stopAutoFlip = () => {
    if (intervalId.value !== null) {
      clearInterval(intervalId.value);
      intervalId.value = null;
    }
  };
  </script>
  
  <style>
  .ctableWrapper {
    height: 100%; /* 让容器高度自适应父级高度 */
    overflow-y: auto; /* 添加滚动条以便测试 */
  }
  
  .indexTable {
    width: 80%;
    height: calc(100% - 40px);
    margin: 10px auto;
    border-collapse: collapse;
  }
  
  .indexTable tr {
    height: 40px; /* 固定的行高 */
    border: 1px solid #021c57;
  }
  
  .indexTable th {
    background-color: #f7f7f72f;
    color: white;
  }
  
  .tableRate {
    display: flex;
    justify-items: center;
    color: dodgerblue;
  }
  </style>
  